<template>
  <div class="second-page">
    <ComTopNum/>
    <div class="center-box">
      <div class="center-box-left">
        <ComNavTab text="激活终端厂商排名"/>
        <ComBaseEcharts echartId="getOptionsForRankBarRefLeft"
                         :options="getOptionsForRankBarRef"
                         :customStyle="{width: '100%', height: '90%'}"/>
      </div>
      <div class="center-box-right">
        <ComNavTab text="昨日活跃终端厂商排名"/>
        <ComBaseEcharts echartId="getOptionsForRankBarReftRight"
                         :options="getOptionsForRankBarRightRef"
                         :customStyle="{width: '100%', height: '90%'}"/>
      </div>
      </div>
    <div class="bottom-box">
        <ComNavTab text="地域应用启动详细统计"/>
        <com-table
            style="z-index: 3"
            scrollHeight="440px"
            :isIndex="false"
            :colorKey="['percentageForPast30Days','percentageForPast7Days','percentageForYesterday']"
            :listData="appStartList"
            :hederTextArray="[
                { title: '厂商', width: '12.5%' },
                { title: '累计激活', width: '12.5%' },
                { title: '近30天活跃', width: '12.5%' },
                { title: '近30天开机率', width: '12.5%' },
                { title: '近7天活跃', width: '12.5%' },
                { title: '近7天开机率', width: '12.5%' },
                { title: '昨天活跃', width: '12.5%' },
                { title: '昨天开机率', width: '12.5%' },
            ]"
            :tableTextArray="[
                'vendorName',
                'totalActiveTerms',
                'activeTermsForPast30Days',
                'percentageForPast30Days',
                'activeTermsForPast7Days',
                'percentageForPast7Days',
                'activeTerms',
                'percentageForYesterday'
            ]"
            ></com-table>
    </div>
  </div>
</template>
<script setup>
  import { ref, onMounted } from "vue";
  import ComNavTab from '@/components/public/ComNavTab.vue';
  import ComBaseEcharts from '@/components/public/ComBaseEcharts.vue'
  import { getOptionsForRankBar, getOptionsForRankRightBar } from './option.js'
  import ComTable from '@/components/public/ComTab/indexView.vue'
  import ComTopNum from '@/views/tms/components/ComTopNum.vue'
  import { getToday} from '@/utils/func/util'
  import { getVendor } from '@/api/tms/tms.js'

  const getOptionsForRankBarRef = ref(getOptionsForRankBar([]))
  const getOptionsForRankBarRightRef = ref(getOptionsForRankRightBar([]))
  //应用启动
  const appStartList = ref([])

  onMounted(() => {
    getVendor({ statDate: getToday() }).then(res => {
      const { data } = res 
      if(data.length > 0){
        const activeTermsTotal = data.slice(0, 10)
        let yTotalLabel = activeTermsTotal.map(v => v.vendorName)
         yTotalLabel = yTotalLabel.map(v => v.slice(0, 4))
        const yTotalData = activeTermsTotal.map(v => v.totalActiveTerms)
        getOptionsForRankBarRef.value = getOptionsForRankBar([], yTotalData, yTotalLabel)

        let yesterDayData = data.sort((a,b) => {
          return b.activeTerms - a.activeTerms
        })
        yesterDayData =  yesterDayData.slice(0, 10)
        let xYesterDay = yesterDayData.map(v => v.vendorName)
        const yYesterDayData = yesterDayData.map(v => v.activeTerms)
        xYesterDay = xYesterDay.map(v => v.slice(0, 4))
        getOptionsForRankBarRightRef.value = getOptionsForRankRightBar(xYesterDay, yYesterDayData, "")

        let tableData = data
        tableData = tableData.map(v=>({
          vendorName: v.vendorName,
          totalActiveTerms: v.totalActiveTerms.toLocaleString(),
          activeTermsForPast30Days: v.activeTermsForPast30Days.toLocaleString(),
          percentageForPast30Days: v.percentageForPast30Days,
          activeTermsForPast7Days: v.activeTermsForPast7Days.toLocaleString(),
          percentageForPast7Days: v.percentageForPast7Days,
          activeTerms: v.activeTerms.toLocaleString(),
          percentageForYesterday: v.percentageForYesterday
        }))
        appStartList.value = tableData 
      }
    })
  })
</script>
<style lang="scss" scoped>
.second-page {
  padding: 0 40px 60px 40px;
  .center-box{
    display: flex;
    height: 500px;
    // padding-top: 25px;
    // background-image: url('/src/assets/BG2.png');
    // background-size: 100% 100%;
    // background-repeat: no-repeat;
    &-left{
      width: 50%;
    }
    &-right{
      width: 50%;
      margin-left:20px;
    }
  }
  .bottom-box{
    height: 500px;
  }
}
</style>
